<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="search" ref="search" :rules="rules" slot="form" label-width="100px">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <!-- <el-select v-model="search.schoolName" filterable clearable remote reserve-keyword placeholder="请输入学校信息" :remote-method="remoteMethod" @change="btnClassList" :loading="loading" style="width:100%">
                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.sName">
                                </el-option>
                            </el-select> -->
                            <!-- {{this.search.schoolId}} -->
                            <school v-model="search.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="班级">
                            <el-select v-model="search.className" placeholder="选择班级" style="width:100%" >
                                <el-option v-for="item in classList" :key="item.pId" :label="item.sNickName" :value="item.pId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品名称">
                            <el-select v-model="search.shopName" placeholder="请选择查询商品" style="width:100%">
                                <el-option v-for="item in shopList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="月份">
                            <el-date-picker :editable="false" v-model="search.month" type="month" placeholder="选择月" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="家长手机号" prop="phone">
                            <el-input v-model="search.phone" :maxlength="11" placeholder="请输入家长手机号" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('search')">查询</el-button>
                    <!-- <el-button class="top-btn" @click="reset('query')">清空</el-button> -->
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <span class="table-title-span"><el-button @click="exportTable()">导出</el-button></span>
                
            </div>
            <el-table :data="tableData" v-loading="loading" style="width: 100%" border>
                <el-table-column label="时间" prop="sCreateTime"  width="170" align="center"></el-table-column>
                <el-table-column label="支付方式" align="center">
                    <template scope="scope">
                        <!-- 1e学云 2支付宝 3微信 4卡券支付 -->
                        {{scope.row.sPayType | payType}}
                    </template>
                </el-table-column>
                <el-table-column label="支付人" prop="sPayUserName" align="center"></el-table-column>
                <el-table-column label="家长手机号" prop="phone" align="center"></el-table-column>
                <el-table-column label="学校" prop="sSchoolName" align="center"></el-table-column>
                <el-table-column label="班级" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.fIncrementId==123551?'课堂直播区域':scope.row.fIncrementId==123552?'全校':scope.row.sClassName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生姓名" prop="sPayTargetName" align="center"></el-table-column>
                <el-table-column label="商品名称" prop="sIncrementName" align="center"></el-table-column>
                <!-- 0不是 1是 -->
                <el-table-column label="是否打包商品" prop="sIsPack" align="center">
                    <template scope="scope">
                        {{scope.row.sIsPack == 0 ? '否':'是'}}
                    </template>
                </el-table-column>
                <el-table-column label="金额（元）" prop="sMoney" align="center"></el-table-column>
                <el-table-column label="购买月数" prop="sMonth" align="center"></el-table-column>
                <el-table-column label="支付状态" prop="sStatus" align="center">
                    <template scope="scope">
                        <!-- 状态0已退回1支付成功 -->
                        {{scope.row.sStatus == '1' ? '支付成功' : '已退回' }}
                    </template>
                </el-table-column>
                <el-table-column label="订单号" prop="sOrderNum"  width="170" align="center"></el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import Cookies from 'js-cookie';
import validate from '@/utils/validate';
import school from 'components/SchoolClasss/school';
import {
  listOrderDetail,
//   exportOrderDetailData,
  listClassInfoBySchoolId,
  listAllServiceType
} from 'api/serviceManage';

export default {
    name: 'orderDetails',
    components: { Levelbar, TableLayout, school },
    data() {
        return {
            loading: false,
            schoolList: [], // 学校名称集合
            tableData: [], // 外table集合
            listQuery: {
                page: 1,
                total: 1
            },
      // 查询条件集合
            search: {
                schoolName: '',
                schoolId: '',
                className: '',
                shopName: '',
                month: '',
                phone: ''
            },
      // 班级列表集合
            classList: [],

      // 商品名称集合
            shopList: [],
            rules: {
                phone: [...validate.phone()]
            }
        };
    },
    created() {
        this.queryData();
        listAllServiceType().then(data => {
            this.shopList = [];
            if (data.data.content) {
                this.shopList = data.data.content;
                this.shopList.unshift({
                    pId: '', sName: '请选择'
                })
            }
        }).catch(Error => {
            this.$message.error(Error)
        })
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.queryData();
        },
        schoolChange(val) {
            if (!val) {
                this.search.schoolId = '';
                this.classList = [];
                this.search.className = '';
            } else {
                this.search.schoolId = val;
                listClassInfoBySchoolId(val).then(data => {
                    if (data.data.content) {
                        this.classList = data.data.content;
                        this.classList.unshift({sNickName: '请选择'})
                    }
                }).catch(Error => {
                    this.$message.error(Error)
                })
            }
        },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.queryData();
                    this.listQuery.page = 1;
                } else {
                    return false;
                }
            });
        },
        queryData() {
            this.loading = true;
            listOrderDetail(
        !this.search.schoolId
          ? ''
          : this.search.schoolId,
        !this.search.className ? '' : this.search.className,
        !this.search.shopName ? '' : this.search.shopName,
        !this.filterDate(this.search.month)
          ? ''
          : this.filterDate(this.search.month),
        !this.search.phone ? '' : this.search.phone,
        this.listQuery.page,
        this.config.pageSize
      ).then(data => {
          this.loading = false;
          this.tableData = [];
          if (data.data.content) {
              this.tableData = data.data.content.list;
              this.listQuery.total = data.data.content.pagination.total;
          }
      }).catch(Error => {
          this.$message.error(Error);
          this.tableData = [];
          this.loading = false;
      })
        },
    // 返回年月  yyyy - mm
        filterDate(val) {
            if (val) {
                let month = val.getMonth() + 1 + '';
                return `${val.getFullYear()}-${month.length > 1 ? month : '0' + month}`;
            } else {
                return ''
            }
        },

    // 通过id查找对应的数组里面的值
        fiflterArray(id) {
            if (id) {
                let num = null;
                this.schoolList.forEach(item => {
                    if (item.pId == id) {
                        num = item.sName;
                    }
                });
                return num;
            }
        },
        exportTable() {
            // this.loading = true;
            // 获取token
            let classId = !this.search.className ? '' : this.search.className;
            if (this.listQuery.total !== '0') {
                let Token = Cookies.get('accessToken');
                window.location.href = `${LOCAL_API.ly}/serviceOrder/exportOrderDetailData?schoolId=${this
                .search.schoolId}&classId=${classId}&incrementId=${this.search
                .shopName}&createDate=${this.filterDate(
                this.search.month
                )}&phone=${this.search.phone}&AccessToken=${Token}`;
            } else {
                this.$message('目前没有数据哦~~');
            }

            // exportOrderDetailData(
            //     !this.fiflterArray(this.search.schoolName)
            //     ? ''
            //     : this.fiflterArray(this.search.schoolName),
            //     !this.search.className ? '' : this.search.className,
            //     !this.search.shopName ? '' : this.search.shopName,
            //     !this.filterDate(this.search.month)
            //     ? ''
            //     : this.filterDate(this.search.month),
            //     Token
            // ).then(data => {
            //     this.loading = false;
            //     // window.href = this.data.data.content;
            //     window.location.href = `http://192.168.0.76:8080/exue-agent-web/agent/serviceOrder/exportOrderDetailData?schoolName=${this
            //     .search.schoolName}&classId=${this.search
            //     .className}&incrementId=${this.search
            //     .shopName}&createDate=${this.filterDate(
            //     this.search.month
            //     )}&AccessToken=${Token}`;
            //     // window.open(`http://192.168.0.76:80/exue-agent-web/agent/serviceOrder/exportOrderDetailData?schoolName=${this.search.schoolName}&classId=${this.search.className}&incrementId=${this.search.shopName}&createDate=${this.search.month}`)
            // });
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  .app-levelbar {
    height: 35px;
  }
}
</style>

